<template><!--slice(start,end)[start,end)-->
    <div>
        <span class="font-group">第一组</span>
        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(72,84)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(36,48)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+12)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(0,12)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+24)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <span class="font-group">第二组</span>
        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(84,96)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+36)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(48,60)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+48)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(12,24)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+60)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <span class="font-group">第三组</span>
        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(96,108)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+72)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(60,72)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+84)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <el-row :gutter="25">
            <el-col :span="2" v-for="(item,index) in boxs.slice(24,36)">
                <div :class="item.status"  class="grid-content" @dblclick="dbClick(index+96)">
                    {{item.position}}
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-button :type="buttonType" size="small" class="but" @click="butClick">{{buttonMode}}</el-button>
        </el-row>
    </div>
</template>

<script>
    /*导入与vue适配的网络模块*/
    import axios from "axios";

    export default {
        name: "stack",
        data(){
            return{
                boxs:[],
                buttonType:'success',
                buttonMode:"清空模式"
            }
        },
        /*vue的钩子函数，在初始化时建立websocket的连接*/
        created() {
            this.initWebSocket();
        },
        destroyed() {
            this.websocketclose();
        },
        methods:{
            dbClick(index){
            /*实际我们后端要求的 'Content-Type': 'application/x-www-form-urlencoded' 为多见*/
                if(this.buttonType=='success'){
                    this.$confirm('清空货位, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            /*所有的异步请求都时在此完成*/
                            url:'http://127.0.0.1:9998/clear?index='+index,
                            method:"post",
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            data:{"index":index}
                        }).then(data=>{
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                        }).catch(err=>{
                            console.log("清空时发生错误"+err);
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    })
                }else if(this.buttonType=='danger'){
                    this.$confirm('禁用货位, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios({
                            /*所有的异步请求都时在此完成*/
                            url:'http://127.0.0.1:9998/forbid?index='+index,
                            method:'post',
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            data:{"index":index}
                        }).then(data=>{
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                        }).catch(err=>{
                            console.log("禁用时发生错误"+err);
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    })
                }


            },
            butClick(){
              if(this.buttonType=='success'){
                  this.buttonType='danger';
                  this.buttonMode="禁用模式";
              }else if(this.buttonType=='danger'){
                  this.buttonType='success';
                  this.buttonMode="清空模式";
              }
            },
            initWebSocket(){
                console.log("创建WebSocket")
                this.websock = new WebSocket("ws://127.0.0.1:9998/websocket/pang")
                this.websock.onmessage = this.websocketonmessage
                this.websock.onerror = this.websocketonerror
                this.websock.onopen = this.websocketonopen
                this.websock.onclose = this.websocketclose
            },
            // 连接建立之后执行send方法发送数据
            websocketonopen () {
                /*此处关闭是为了不让websocket乱回信息*/
                //this.websocketsend();
                /*每次重新建立连接都发送一次请求去请求数据库数据,通过websocket来发送数据至前端*/
                axios({
                    /*所有的异步请求都时在此完成*/
                    url:'http://localhost:9998/showAllStack',
                    method:"get",
                    params:{}/*这里没有参数，是query还是params？*/
                }).then(data=>{
                    console.log(data.data);
                    console.log( 'WebSocket连接成功，初次连接');
                }).catch(err=>{
                    console.log(err);
                })

            },
            //websocket连接发生错误
            websocketonerror () {
                console.log( 'WebSocket连接失败');
            },
            // 数据接收
            websocketonmessage (e) {
                console.log('数据接收' + e.data);
                console.log('数组的长度为'+this.boxs.length);
                /*JSON.parse(e.data);将json格式的字符串转换为对象*/
                /*JSON.stringify(object)对象转换为JSON格式字符串*/
                let result = JSON.parse(e.data);
                if (this.boxs.length<10){
                    for (let box of result){
                        this.boxs.push(box)
                    }
                }else{
                    this.boxs.splice(0,this.boxs.length);
                    for (let box of result){
                        this.boxs.push(box)
                    }
                }
            },
            // 数据发送,暂时没用到它
            websocketsend () {
                this.websock.send('发我数据呗');

            },
            // 关闭
            websocketclose (e) {
                console.log('已关闭连接', e);
            },
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 5px;
        margin-top: 5px;
    }
    .grid-content {
        font-size: 12px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border:1px solid black;
    }
    .font-group{
        font-size: 12px;
    }
    /*实现闪烁的效果*/
    @keyframes fade{
        from{
            opacity: 1.0;
        }
        50%{
            opacity: 0.2;
        }
        to{
            opacity: 1.0;
        }
    }

    .NO{
        background-color: green;
    }
    .YES{
        background-color: red;
    }
    .FROMUSE{
        background-color: rebeccapurple;
        animation: fade 600ms infinite;
        -webkit-animation: fade 600ms infinite;
    }
    .TOUSE{
        background-color: chartreuse;
        animation: fade 600ms infinite;
        -webkit-animation: fade 600ms infinite;
    }
    .NOUSE{
        background-color:white;
        color:black;
        border:1px dashed black;
    }
    .but{
        margin-top: 10px;
    }
</style>